import { Table,Space} from 'antd';
import { UserTable } from '../../utils/Ajax'
import { TablePage  } from '../../utils/TablePage'
import { DeleteButton } from "../Delete";
import EditButton from "../Edit";

import React, {Component} from 'react';

interface IList {
    id: number,
    name: string,
    mobile: string,
    email: string
}

interface IProps{

}

interface IState {
    UserList: IList[],
    current: number
    hideOnSinglePage?: boolean,
    pageSize: number,
    total: number,
    loading:boolean,
}

class UserList  extends Component<IProps,IState> {
    constructor(props:IProps) {
        super(props);
        this.state = {
            UserList: [],
            current: 1,
            pageSize: 5,
            total: 0,
            loading: true,
        }
    }



    getUserList = ()=> {
        UserTable(1).then((res:any)=>{
            const  { list }  = res.data;
            let { pageSize, list:totalList, total} = TablePage(list);
            this.setState({
                UserList: totalList,
                loading: false,
                pageSize: pageSize,
                total:total
            })
        });
    };

    deleteUser = (userId: number)=> {
        const userList = this.state.UserList;
        this.setState({
            UserList: userList.filter(r=>r.id !== userId)
        })
    }

    componentDidMount(): void {

        this.getUserList();
    }

    componentWillUnmount(): void {
    }

    public render() {
        return (
            <>
                <Table
                    loading={this.state.loading}
                    dataSource={this.state.UserList}
                    rowKey={record => record.id + Math.random()}
                    pagination = {{ position: ['bottomCenter'],total:this.state.total,pageSize:this.state.pageSize}}
                >
                    <Table.Column
                        title = {'ID'}
                        dataIndex={'id'}/>
                    <Table.Column
                        title = {'姓名'}
                        dataIndex={'name'}/>
                    <Table.Column
                        title = {'手机号'}
                        dataIndex={'mobile'}/>
                    <Table.Column
                        title = {'邮箱'}
                        dataIndex={'email'}/>
                    <Table.Column
                        title = {'编辑'}
                        render={(list:IList)=> (
                            <Space>
                               <EditButton id={list.id}  />
                                <DeleteButton id={list.id} callback={this.deleteUser} />
                            </Space>
                        )}
                        />
                </Table>
            </>
        );
    }
}

export default UserList ;

